<template>
  <div class="coupons-list">
    <radio-group class="radio-group" @change="radioChange">
        <dl v-for="(item,index) in settleData.coupons" :key="index"  @click="toCashierPage(item.coupon_id)">
          <label class="radio">
            <radio :value="item.coupon_id" :checked="item.coupon_id == defaultCouponId" />
          </label>
          <dt>
            <h2>
              <font>¥</font>{{item.amount_yuan}}
            </h2>
            <h3 class="ellipsis-twoline">{{item.coupon_desc}}</h3>
            <h4>{{item.startTime}}-{{item.endTime}}</h4>
          </dt>
          <dd><span></span>
            <h2>{{item.title}}</h2>
            <h3>{{item.rules_desc}}</h3>
          </dd>
        </dl>
    </radio-group>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
export default {
  data() {
    return {
    }
  },
  onLoad() {
    this.$wx.setTitleBarTitle('我的优惠券');
  },
  computed: {
    // 计算属性的 getter
    ...mapState('cart', ['settleData','defaultCouponId'])
  },
  methods: {
    ...mapActions('cart', [
       'checkSettle'
      ]),
    toCashierPage(couponId){
      this.selectShipping(couponId)
    },
    async selectShipping(couponId){
      await this.checkSettle({isSettlePage:true, coupon_id:couponId})
      this.$wx.back(1)
    }
  },
}
</script>

<style scoped>
.coupons-list dl radio{position: absolute; top: 6px; right: 6px;}
</style>
